<template>
  <div>
    <div class="titles">
      <img src="../../../assets/onLineService/icon4.png" alt="" style="width:.4rem;height:.4rem;vertical-align: middle;">
      <span style="color:#898989;font-size:.25rem;">总数</span>
      <span style="font-size:.28rem;font-weight:600;">{{formatQ(formData.zong)}}</span>
    </div>
    <div class="chart-container1">
      <div ref="chartPie" style="width:100%;height:4rem;"></div>
    </div>
    <div class="tipsCon">
      <div class="tipsItem">
        <div class="nums">
          <div class="colorBlock" style="background:#11D0B6"></div>
          <span style="vertical-align: middle;">ETC：{{formData.etc}}</span>
        </div>
        <div class="per">
          占比：{{Number(formData.etc)?(Number(formData.etc)/(formData.zong)*100).toFixed(2):0}}%
        </div>
      </div>
      <div class="tipsItem">
        <div class="nums">
        <div class="colorBlock" style="background:#01B1EE"></div>
          路况：{{formData.lu}}
        </div>
        <div class="per">
          占比：{{Number(formData.lu)?(Number(formData.lu)/(formData.zong)*100).toFixed(2):0}}%
        </div>
      </div>
      <div class="tipsItem">
        <div class="nums">
        <div class="colorBlock" style="background:#FFD56D"></div>
          其他：{{formData.qi}}
        </div>
        <div class="per">
          占比：{{Number(formData.qi)?(Number(formData.qi)/(formData.zong)*100).toFixed(2):0}}%
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    formData: {}
  },
  data() {
    return {
      totalCount: 0
    };
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.drawPieChart();
      },
      deep: true
    }
  },
  mounted() {
    this.drawPieChart();
  },
  methods: {
    drawPieChart() {
      this.chartPie = this.$echarts.init(this.$refs.chartPie);
      // console.log(this.formData);
      let yData = [
        { value: this.formData.etc, name: "ETC" },
        { value: this.formData.lu, name: "路况" },
        { value: this.formData.qi, name: "其他" }
      ];
      this.chartPie.setOption({
        tooltip: {
          // showContent: false
        },
        series: [
          {
            type: "pie",
            // roseType: "radius",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            color: ["#11D0B6", "#01B1EE", "#FFD56D"],
            data: yData
          }
        ]
      });
    },
    // 千分符
    formatQ(str) {
      if (!str) return;
      str = parseInt(str)
        .toString()
        .split(".");
      // // console.log("第一次处理后的num",str);
      str[0] = str[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // // console.log("第一次处理后的num",str[0]);
      return str.join(".");
    }
  }
};
</script>

<style scoped lang='less'>
.tipsItem {
  display: flex;
  justify-content: space-between;
  color: #3d3d3d;
  font-size: 0.25rem;
  line-height: 1.5;
  .colorBlock {
    display: inline-block;
    height: 0.15rem;
    width: 0.3rem;
    border-radius: 0.2rem;
    vertical-align: middle;
  }
  .per {
    text-align: left;
    width: 28%;
  }
}
</style>